<template>
	<view class="bg-white" style="height: 100vh;">
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">注册</block>
		</cu-custom>
		<message ref="message"></message>
		<view class="flex justify-center margin-top-xl text-bold login-title">
			青少年兴趣课管理系统
		</view>
		<view>
			<form ref="loginRef" class="align-center justify-center" @submit="formSubmit" @reset="formReset">
				<view class="flex justify-center align-center margin-bottom">
					<view class="iconfont icon-gerenzhongxin input-lable"></view>
					<input class="form-input" v-model="loginForm.username" maxlength="30" name="username"
						placeholder="用户名" />
				</view>
				<view class="flex justify-center align-center margin-bottom">
					<view class="iconfont icon-ziyuanxhdpi input-lable"></view>
					<input class="form-input" v-model="loginForm.password" maxlength="30" type="password"
						name="password" placeholder="密码" />
				</view>
				<view class="flex justify-center align-center">
					<view class="iconfont icon-ziyuanxhdpi input-lable"></view>
					<input class="form-input" v-model="loginForm.password1" maxlength="30" type="password"
						name="password1" placeholder="确认密码" />
				</view>
				<view class="flex justify-center margin">
					<button type="default" form-type="reset" style="width: 35%; margin-right: 50rpx;">重置</button>
					<button form-type="submit" style="width: 35%;">注册</button>
				</view>
			</form>
			<view class="flex justify-end margin-top" style="font-size: 30rpx;">
				<view class="margin-right">邮箱注册</view>
				<view style="margin-right: 80rpx;">其他方式注册</view>
			</view>
		</view>

		<!-- 行为验证码 -->
		<verify ref="verify" :captchaType="'clickWord'" :imgSize="{ width: '260px', height: '135px' }"
			@success="register">
		</verify>
	</view>
</template>

<script>
	import graceChecker from '../../common/graceChecker.js'
	import Verify from '../../components/verify/verify.vue'
	import {
		register
	} from '../../api/user.js'

		export default {
			components: {
				Verify
			},
			data() {
				return {
					loginForm: {
						username: '',
						password: '',
						password1: ''
					}
				}
			},
			created() {
				this.formReset()
			},
			methods: {
				// 点击登录处理事件
				formSubmit: function(e) {
					// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
					//定义表单规则
					var rule = [{
							name: "username",
							checkType: "string",
							checkRule: "6,20",
							errorMsg: "用户名应为6-20个字符"
						},
						{
							name: "password",
							checkType: "string",
							checkRule: "6,20",
							errorMsg: "密码至少6个字符"
						},
						{
							name: "password1",
							checkType: "string",
							checkRule: "6,20",
							errorMsg: "确认密码至少6个字符"
						},
						{
							name: "password1",
							checkType: "same",
							checkRule: this.loginForm.password,
							errorMsg: "两次密码不一致"
						}
					];
					//进行表单检查
					var formData = e.detail.value;
					var checkRes = graceChecker.check(formData, rule);
					if (checkRes) {
						// 调用行为验证码
						this.$refs.verify.show()
					} else {
						this.$refs.message.error({
							title: graceChecker.error,
							duration: 2000
						})
					}
				},
				// 重置表单事件
				formReset: function(e) {
					this.loginForm = {
						username: '',
						password: '',
						password1: ''
					}
				},
				// 注册事件
				register() {
					register(this.loginForm).then(res => {
						this.formReset()
						uni.showToast({
							title: res.msg,
							duration: 2000
						})
						// 登陆成功，返回上一页吗
						uni.navigateBack();
					}).catch((err) => {
						this.formReset()
						this.$refs.message.error({
							title: err.msg,
							duration: 4000
						})
					})
				}
			}
		}
</script>

<style scoped>
	.login-title {
		font-size: 45rpx;
		margin-bottom: 80rpx;
	}

	.input-lable {
		font-size: 40rpx;
		position: absolute;
		left: 100rpx;
	}

	.form-input {
		border: 1px solid #d9d9d9;
		border-radius: 10rpx;
		height: 85rpx;
		font-size: 30rpx;
		width: 80%;
		padding-left: 80rpx;
	}
</style>
